<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ToDoList</title>
		<style type="text/css">
			body{
				margin: 0;
				padding: 0;
				background-color: #CDCDCD;
			}
			#header {
				width: 100%;
				height: 50px;
				background-color: rgba(47,47,47,0.98);
			}
			#headerTop {
				width: 600px;
				height: 50px;
				margin: auto;
				/*background-color: lightblue;*/
			}
			label {
				float:left;
				width:100px;
				line-height:50px;
				color:#DDD;
				font-size:24px;
				cursor:pointer;
				
				font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
			}
			#headerTop input {
				float: right;
				width: 360px;
				height: 24px;
				margin-top: 12px;
				text-indent: 1em;
				border: none;
				border-radius: 5px;
				box-shadow: 0 1px 0 rgba(255,255,255,0.24);
				}
			input:focus {
				outline-width:0 ;
			}
			#content {
				width: 600px;
				height: 40px;
				line-height: 40px;
				margin: auto;
				/*background: lightblue;*/
			}
			#content span {
				position: relative;
				right: -490px;
				padding: 0 5px;
				height: 20px;
				line-height: 22px;
				text-align: center;
				border-radius: 20px;
				background-color: #e6e6ea;
				font-size: 14px;
			}
			#footer {
				text-align: center;
				color: #666666;
				font-size: 14px;
				margin-top: 30px;
			}
			#footer a {
				text-decoration:none;
				color:#999;
			}
		</style>
	</head>
	<body>
		<div id="header">
			<div id="headerTop">
				<label>ToDoList</label>
				<input type="text" name="" id="title" value="" required="required" placeholder="添加ToDo" />
			</div>
		</div>
		<div id="content">
			<h3>正在进行
			<span id="todocount">0</span>
			</h3>
			<table id="todolist" border="0" cellspacing="0" cellpadding="0">
			</table>
		</div>
		<div id="content">
			<h3>已经完成
			<span id="donecount">0</span>
			</h3>
			<table id="donelist" border="0" cellspacing="0" cellpadding="0">
			</table>
		</div>
		<div id="footer">
			 Copyright © 2014 todolist.cn &nbsp;&nbsp;<a href="">clear</a>
		</div>
	</body>
	<script type="text/javascript">
		function add(){
			if(window.event.keyCode == 13){
				var title = document.getElementById("title");
				var todocount = document.getElementById("todocount");
				var donecount = document.getElementById("donecount");
				if(title.value == 0){
					alert("内容 不能为空")
				}else {
					var todolist = document.getElementById("todolist");
					var tr = todolist.insertRow();
					var td0 = tr.insertCell();
					var td1 = tr.insertCell();
					var td2 = tr.insertCell(); 
					var td3 = tr.insertCell();
//					border-left: 5px solid #629A9C;
					td0.innerHTML = "<span>123</span>"
					td1.innerHTML = "<input type='checkbox' class='check' >";
                    td2.innerHTML = "<input type='text' class='content' value='" + title.value + "'>";
                    td3.innerHTML = "<button type='button' >-</button>"
                    todo.value = "";
                    todolist.firstChild.nodeValue++;
				}
			}
		}
		 function check(checkbox) {
            var todocount = document.getElementById('todocount');
            var donecount = document.getElementById('donecount');
            
            if (checkbox.checked == true) {

                var donelist = document.getElementById('donelist');

                var tr = donelist.insertRow();
                var td0 = tr.insertCell();
                var td1 = tr.insertCell();
                var td2 = tr.insertCell();
                var td3 = tr.insertCell();
                td0.innerHTML = "<span>123</span>"
                td1.innerHTML = "<input type='checkbox' onclick='check(this)' checked='checked' class='check'>   ";
                td2.innerHTML = "<input type='text' class='content' value='" + checkbox.parentNode.nextSibling.firstChild.value + "'>"
                td3.innerHTML = "<button type='button' onclick='del2(this)'>-</button>";
                var i = checkbox.parentNode.parentNode.rowIndex;
                document.getElementById('todolist').deleteRow(i);

                donecount.firstChild.nodeValue++;
                todocount.firstChild.nodeValue--;
            } else {
                var todolist = document.getElementById('todolist');

                var tr = todolist.insertRow();
                
                var td0 = tr.insertCell();
                var td1 = tr.insertCell();
                var td2 = tr.insertCell();
                var td3 = tr.insertCell();
                td0.innerHTML = "<span>123</span>"
                td1.innerHTML = "<input type='checkbox' onclick='check(this)' class='check'>   ";
                td2.innerHTML = "<input type='text' class='content' value='" + checkbox.parentNode.nextSibling.firstChild.value + "'>";
                td3.innerHTML = "<button type='button' onclick='del1(this)'>- </button>";
                var i = checkbox.parentNode.parentNode.rowIndex;
                document.getElementById('donelist').deleteRow(i);

                donecount.firstChild.nodeValue--;
                todolist.firstChild.nodeValue++;
            }
        }
		   function del1(thisRow) {
            thisRow.parentNode.parentNode.parentNode.deleteRow(thisRow.parentNode.parentNode.rowIndex);
            var todocount = document.getElementById('todocount');
            todocount.firstChild.nodeValue--;
        }
        function del2(thisRow) {
            thisRow.parentNode.parentNode.parentNode.deleteRow(thisRow.parentNode.parentNode.rowIndex);
            var donecount= document.getElementById('donecount');
          donecount.firstChild.nodeValue--;
        }
        function reload() {
            window.location.reload();
        }
	</script>
</html>
